<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流程定义</title>

    <style>
        body {
            font-family: Arial, sans-serif;
        }

        h1 {
            text-align: center;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        tbody tr:hover {
            background-color: #f5f5f5;
        }

        #pagination-info, #pagination-buttons {
            text-align: center;
            margin: 20px 0;
        }

        #pagination-buttons button {
            padding: 8px 12px;
            margin: 0 5px;
            border: none;
            cursor: pointer;
            background-color: #007bff;
            color: #fff;
            border-radius: 4px;
        }

        #pagination-buttons button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<div id="per-page-select">
  每页显示:
  <select id="items-per-page">
    <option value="5">5</option>
    <option value="10" selected>10</option>
    <option value="20">20</option>
  </select>
</div>
<table>
  <thead>
  <tr>
    <th>序号</th>
    <th>任务ID</th>
    <th>任务名称</th>
    <th>任务办理人</th>
    <th>流程定义ID</th>
    <th>流程名称</th>

  </tr>
  </thead>
  <tbody id="data-table">
  <!-- 数据将通过 JavaScript 动态添加到这里 -->
  </tbody>
</table>
<div id="pagination-info">
  当前页: <span id="current-page">1</span> / 总页数: <span id="total-pages">1</span>/总数: <span id="total">2</span>
</div>
<div id="pagination-buttons">
  <button id="prev-page">上一页</button>
  <button id="next-page">下一页</button>
  <button id="refresh-page">刷新</button>
</div>

<!-- ...（之前的 HTML 部分保持不变） ... -->

<script>
  const dataTable = document.getElementById('data-table');
  const prevPageButton = document.getElementById('prev-page');
  const nextPageButton = document.getElementById('next-page');
  const refreshPageButton = document.getElementById('refresh-page');
  const currentPageSpan = document.getElementById('current-page');
  const totalPageSpan = document.getElementById('total-pages');
  const itemsPerPageSelect = document.getElementById('items-per-page');
  let currentPage = 1;
  let totalPages = 1;
  let total = 1;
  let itemsPerPage = parseInt(itemsPerPageSelect.value, 10);
  const totalSpan = document.getElementById('total');

  function loadData(page, pageSize) {
    // 使用 XMLHttpRequest 或 Fetch API 从后端获取数据
    fetch(`tasks/taskList?page=${page}&pageSize=${pageSize}`)
            .then(response => response.json())
            .then(data => {
              // 清空现有数据
              dataTable.innerHTML = '';

              // 在表格中显示数据
              data.data.forEach((item, index) => {
                const row = document.createElement('tr');
                const indexCell = document.createElement('td');
                indexCell.textContent = (page - 1) * parseInt(itemsPerPageSelect.value, 10) + index + 1;

                const ageCell = document.createElement('td');
                ageCell.textContent = item.id;

                const nameCell = document.createElement('td');
                nameCell.textContent = item.name;

                const assigneeCell = document.createElement('td');
                assigneeCell.textContent = item.assignee;


                row.appendChild(indexCell);
                row.appendChild(ageCell);
                row.appendChild(nameCell);
                row.appendChild(assigneeCell);
                dataTable.appendChild(row);
              });

              // 更新页数信息
              currentPage = data.page;
              totalPages = data.totalPages;
              currentPageSpan.textContent = currentPage;
              totalPageSpan.textContent = totalPages;

              // 更新按钮状态
              prevPageButton.disabled = currentPage === 1;
              nextPageButton.disabled = currentPage === totalPages;
            })
            .catch(error => {
              console.error('Error fetching data:', error);
            });
  }

  prevPageButton.addEventListener('click', () => {
    if (currentPage > 1) {
      loadData(currentPage - 1, parseInt(itemsPerPageSelect.value, 10)); // 查询上一页数据
    }
  });

  nextPageButton.addEventListener('click', () => {
    if (currentPage < totalPages) {
      loadData(currentPage + 1, parseInt(itemsPerPageSelect.value, 10)); // 查询下一页数据
    }
  });

  refreshPageButton.addEventListener('click', () => {
    loadData(currentPage, parseInt(itemsPerPageSelect.value, 10)); // 重新加载当前页数据
  });


  // 初始化加载第一页数据
  loadData(currentPage, parseInt(itemsPerPageSelect.value, 10));
</script>


</body>
</html>
